<template>
	<view disabled="col" @touchend="maskTouchend">
		<view style="color: red;">
		</view>
		<view class="ad"></view>
		<view class="info col">
			<view class="row info-top" @click="goDetail">
				<view class="avater">
				</view>
				<view class="col-between" style="width: 100%;margin-left: 20rpx;">
					<view class="row-between">
						<view class="col" >
							<view class="title">编号6173</view>
							<view class="author">作者：xxx</view>
						</view>
						<image src="/static/images/fa-star.svg" class="forcuse"></image>
					</view>
					<view class="count">1.29亿人气|200评论|11万收藏</view>
				</view>
			</view>
			
			<view class="row-between-center" style="margin-top: 20rpx;margin-left: 40rpx;margin-right: 40rpx ;" >
				<view class="col">
					<image src="/static/images/fa-star.svg" class="forcuse"></image>
					<view>点赞</view>
				</view>
				
				<view class="col">
					<image src="/static/images/fa-star.svg" class="forcuse"></image>
					<view>打赏</view>
				</view>
				
				<view class="col">
					<image src="/static/images/fa-star.svg" class="forcuse"></image>
					<view>评论</view>
				</view>
				
				<view class="col">
					<image src="/static/images/fa-star.svg" class="forcuse"></image>
					<view>分享</view>
				</view>
			</view>
			
			<view class="row-center reward" style="margin-top: 40rpx;">
				阅 读 奖 励
			</view>
			
		</view>
	</view>


</template>

<script>
	import {
		addCommpent,
		getCommpent,
		getHomeRecmend,
		getItemContent,
		getItemWork,
		addFlow,
		addCollect,
	} from '@/api/change/index.js'

	export default {
		data() {
			return {
				showFloat: false,
				list: [],
				nowItem:{},
				nowList: [],
				evaluateList: [],
				showEvaluate: false,
				sendMsg: '',
				nowIndex: 0,
				commonet:{},
				touchNum:0
			}
		},
		onLoad() {
			console.log('function222')
			this.getHomeRecmend1()
		},
		mounted: function() {
			this.getHomeRecmend1()

		},
		onShow() {
			console.log('onShowonShowonShow')
		},
		onReady() {
			console.log('onReady')
		},

		methods: {
			
				maskTouchend(e){
						this.touchNum ++
						setTimeout(()=>{
							if(this.touchNum == 1){
								console.log('单击')
							}
							if(this.touchNum >= 2){
								console.log('双击')
							}
							this.touchNum = 0
						},250)
					},	
			
			changeSwiper(e){
					console.log('changeSwiper',e)
					// if(e.detail.current){
						
					// }
			},
			getCommpent(){
				getCommpent(this.nowItem.workId).then(res=>{
					
				})
			},
			
			addCommpent(){
				if(!this.sendMsg){
					uni.showToast({
						title:'请输入内容',
						icon:'none'
					})
					return
				}
				addCommpent({
					content:this.sendMsg,
					pid:uni.getStorageSync('uid'),
					workItemId:this.nowItem.workId
				}).then(res=>{
					
				})
			},
			
			addFollow() {
				addFlow({workId:this.nowItem.workId}).then(res => {
					if(!this.nowItem.isFlow){
						this.nowItem.isFlow=1
					}else{
						this.nowItem.isFlow=0
					}
				})
			},
			addCollect() {
				addCollect({itemId:this.nowItem.id}).then(res => {
					if(!this.nowItem.isCollection){
						this.nowItem.isCollection=1
					}else{
						this.nowItem.isCollection=0
					}
				})
			},
			
			showEvaluateM(){
				this.showEvaluate = true
				this.getCommpent()
			},
			
			operateEvalueate() {
				if (!uni.getStorageSync('uid')) {
					uni.navigateTo({
						url: '/pages/login'
					})
					return
				}

				this.showEvaluate = true
			},

			goTop() {
				this.showFloat = !this.showFloat

			},
			getHomeRecmend1() {
				getHomeRecmend({
					page: 1,
					pageSize: 10
				}).then(res => {
					this.list = res.data
					this.nowItem = this.list[this.nowIndex]
					this.nowList = this.list[this.nowIndex].pics
					// this.getItemContent1()
				})
			},

			getItemContent1(id) {
				getItemContent(id).then(res => {

				})
			},

			showMore() {
				this.showFloat = !this.showFloat
			},
			goDetail() {
				uni.navigateTo({
					url: '/pages/home/details?id='+this.nowItem.workId+'&itemId='+this.nowItem.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ad{
		border-radius: 20rpx;
		margin: 20rpx;
		background-color: red;
		height: 520rpx;
	}
	.info{
		border-radius: 20rpx;
		background-color: #f8f8f8;
		padding: 20rpx;
		.avater{
			flex-shrink: 0;
			background-color: red;
			height: 180rpx;
			width: 140rpx;
			border-radius: 20rpx;
		}
		.title{
			font-weight: bolder;
			font-size: 36rpx;
			color: black;
			    white-space:nowrap;

		}
		.author{
			font-size: 30rpx;
			color: #9a9a9a;
			    white-space:nowrap;

		}
		.forcuse{
			width: 70rpx;
			height: 70rpx;
		}
		.count{
			font-size: 30rpx;
			color: black;
		}
		.info-top{
			background-color: white;
			border-radius: 20rpx;
			padding: 20rpx;
		}
		.reward{
			background-color: #bd3124;
			border-radius: 20rpx;
			color: white;
			height: 100rpx;
			font-size: 34rpx;
		}
	}
</style>